import { login } from "@/services/user";
import { Button, Form, Input, message } from "antd";
import { useState } from "react";
import { history } from "umi";
import "./index.css";

const Index: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const initialValues = {
    username: "admin",
    password: "123456789"
  };

  // 登录操作
  const onFinish = async (values: USER.LoginParams) => {
    // 一般的请求响应错误，默认会自动中断执行，需要处理错误的才使用try catch
    try {
      setLoading(true);
      await login(values);
      history.push("/");
    } catch (error) {
      setLoading(false);
      message.error("登录失败");
      console.error(error);
    }
  };

  return (
    <div className="loginContainer">
      <div className="loginForm">
        <div className="loginTitle">
          <img
            style={{ width: "40px" }}
            src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
          />
          <div style={{ marginLeft: "10px" }}>Ant Design Admin</div>
        </div>
        <div className="loginTip">Ant Design 是西湖区最具影响力的 Web 设计规范</div>

        {/* 登录表单 */}
        <Form form={form} initialValues={initialValues} onFinish={onFinish}>
          <Form.Item
            label="账号"
            name="username"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input placeholder="请输入账号"></Input>
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input.Password placeholder="请输入密码"></Input.Password>
          </Form.Item>
          <Button block type="primary" htmlType="submit" loading={loading}>
            登录
          </Button>
        </Form>
      </div>
    </div>
  );
};

export default Index;
